<template>
  <div>
    <el-container>
      <el-header>
        <div class="headerdiv">
          <img src="@/assets/vue.svg" alt="" class="headerimg" />
          <h1 class="headerh1">青芒电商后台管理系统</h1>
        </div>
        <div>
          <el-avatar :size="50" src="UserFilled" />
          <el-dropdown>
            <span class="el-dropdown-link">
              用户设置
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <!-- disabled是否禁用 -->
              <el-dropdown-menu>
                <el-dropdown-item>Action 1</el-dropdown-item>
                <el-dropdown-item>Action 2</el-dropdown-item>
                <el-dropdown-item>Action 3</el-dropdown-item>
                <el-dropdown-item><el-button @click="loginOut">退出</el-button></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

      </el-header>
      <el-container>
        <!-- 组侧菜单 -->
        <el-aside width="200px">
          <el-menu background-color="#545c64" text-color="#fff" unique-opened router active-text-color="#ffd04b">
            <el-sub-menu :index="i + ''" v-for="(item, i) in menulist" :key="i">
              <template #title>
                <el-icon :class="'iconfont ' + iconObj[item.id as number]"></el-icon>
                <span>
                  {{ item.authName }}
                </span>
              </template>
              <el-menu-item :index="'/home/' + son.path" v-for="son in item.children" :key="son.id">
                <template #title>
                  <el-icon>
                    <Menu />
                  </el-icon>
                  <span>
                    {{ son.authName }}
                  </span>
                </template>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
// 头像
import { UserFilled } from '@element-plus/icons-vue'
// 退出
import { useRouter } from 'vue-router'
const router = useRouter()
const loginOut = () => {
  router.push('/')
}
import request from '@/util/request'
import { onMounted, ref } from 'vue'
import { menup } from '@/api/menu/type'
const iconObj = {
  125: 'icon-user',
  103: 'icon-tijikongjian',
  101: 'icon-shangpin',
  102: 'icon-danju',
  145: 'icon-baobiao',
}
const menulist = ref<menup[]>([])
const getMenu = async () => {
  const data = await request({
    url: '/menus',
    method: 'GET',
    // 在请求方法中 添加请求头
    // headers: {
    //   Authorization:
    //     'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE3MTY3MjQyMzUsImV4cCI6MTcxNjgxMDYzNX0.V-HNGBr_PRUNtS--su4MJZ0k81fQ5kyTf-P3dcitPnw',
    // },
  })
  menulist.value = data.data
  // console.log('----------', data)
}
// 生命周期函数
onMounted(() => {
  getMenu()
})
</script>
<style scoped>
.el-header {
  background-color: #373d41;
  color: #fff;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  padding: 0;
}

.headerdiv {
  display: flex;
}

.headerimg {
  margin-top: -23px;
  width: 200px;
  height: 200px;
}

.headerh1 {
  height: 60px;
  font-style: 20px;
  line-height: 60px;
}

.el-dropdown-link {
  height: 60px;
  font-style: 20px;
  line-height: 60px;
  color: #fff;
  margin-right: 15px;
}

.el-button {
  height: 40px;
  margin-top: 10px;
  margin-right: 60px;
}

.el-aside {
  height: 100vh;
  background-color: #333744;
}

.el-main {
  height: 100vh;
  background-color: #eaedf1;
}
</style>
